<template>
	<view :style="{height:height+50+'px'}">
		<u-swiper height="360rpx" :list="swiperList" :radius="0"></u-swiper>
		<view style="padding:20rpx 20rpx 0 20rpx">
			<vol-alert type="primary">
				<view>集瑞联合卡车综合业务APP</view>
				<view>1、费用控制系统</view>
				<view>2、经营分析系统</view>
				<view>3、接口监控系统</view>
				<view>4、内部信息发布系统</view>
			</vol-alert>
		</view>
		<view class="card-container">
			<view class="fn-title">基础功能</view>
			<u-grid :border="false" @click="gridClick" col="4">
				<u-grid-item v-for="(item,index) in fn" :key="index">
					<image style="width:75rpx;height: 75rpx;" :src="item.icon">
						<u-badge :absolute="absolute1" v-if="index==0" :offset="offset1" type="warning" max="99"
							:value="badge_value"></u-badge>
						<u-badge :absolute="absolute1" v-if="index==1" :offset="offset1" type="warning" max="99"
							:value="cn_badge_value"></u-badge>
					</image>

					<!-- <u-icon :customStyle="getStyle(item)" :name="item.icon" :size="22"></u-icon> -->
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<vol-tabbar :index="0"></vol-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				badge_value: 0,
				cn_badge_value: 0,
				offset1: [2, 10],
				absolute1: true,
				height: 0,
				swiperList: [
					//'/static/swiper5.jpg',
					'/static/swiper6.jpg',
					'/static/p1.png',
					'/static/p2.png',
					//'/static/swiper7.jpg'
				],
				fn: [{
						name: "费用报销",
						icon: '/static/imgs/menu.png',
						//path: "/pages/menu/menu",
						path: "/pages/mytable/Fk_reim/Fk_reim",
					},
					{
						name: "差旅报销",
						icon: '/static/imgs/jisuanqi.png',
						//path: "/pages/menu/menu",
						path: "/pages/mytable/Fk_reim/Fk_reim_cc",
					},
					{
						name: "统计",
						icon: '/static/imgs/stat.png',
						path: "/pages/form/form"
					},
					{
						name: "订单",
						icon: '/static/imgs/message.png',
						path: "/pages/message/message"
					},
					{
						name: "我的",
						icon: '/static/imgs/user.png',
						path: "/pages/user/user",
					}
				],
			}
		},
		onLoad() {
			var _this = this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			var turl = "/api/Fk_reim/get_dclcount_new?";
			this.http.post(turl, {}, true).then((s) => { //获取待处理业务
			    
			    let fyrows=s.filter(w=>{
					return w.lstype=='1'
				});
				
				let cnrows=s.filter(w=>{
					return w.lstype=='2'
				});
				if (fyrows.length>0){
					this.badge_value=fyrows[0].count
				}
				if (cnrows.length>0){
					this.cn_badge_value=cnrows[0].count
				}
				

			});
		},
		methods: {
			getStyle(item) {
				return {
					paddingTop: 20 + 'rpx',
					background: item.color,
					padding: '50%',
					color: "#ffff",
					'border-radius': '50%',
					left: '-24rpx'
				}
			},
			gridClick(index) {
				if (index == 0 ||index == 1) {
					uni.navigateTo({
						url: this.fn[index].path
					})
				} else {
					uni.switchTab({
						url: this.fn[index].path
					})
				}

			},
			swiperClick(index) {

			}
		}
	}
</script>
<style lang="less" scoped>
	.card-container {
		box-shadow: 1px 1px 9px #efefef;
		margin: 20rpx;
		border: 1px solid #f1f1f1;
		border-radius: 10rpx;
		padding: 20rpx 4rpx;

		.fn-title {
			font-size: 28rpx;
			color: #8f9ca2;
			padding: 4rpx 0 30rpx 20rpx;
		}

		.grid-text {
			padding: 12rpx 0 30rpx 0rpx;
			font-size: 20rpx;
		}
	}
</style>
